<template>
  <view class="profile-container">
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="user-avatar" @tap="editAvatar">
        <image :src="userInfo.avatar" mode="aspectFill" class="avatar-img"></image>
      </view>
      <view class="user-info">
        <text class="user-name">{{ userInfo.name }}</text>
        <text class="user-account">账号：{{ userInfo.account }}</text>
        <text class="user-phone">{{ userInfo.phone || '未绑定手机' }}</text>
        <!-- 实名认证状态 -->
        <view class="verification-status" :class="{ 'verified': userInfo.isVerified, 'unverified': !userInfo.isVerified }">
          <text class="verification-icon">{{ userInfo.isVerified ? '✅' : '⚠️' }}</text>
          <text class="verification-text">{{ userInfo.isVerified ? '已实名认证' : '未实名认证' }}</text>
        </view>
      </view>
      <view class="edit-btn" @tap="showEditModal">
        <text class="edit-text">编辑</text>
      </view>
    </view>

    <!-- 实名认证提醒 -->
    <view v-if="!userInfo.isVerified" class="verification-alert">
      <view class="alert-content">
        <text class="alert-icon">🔒</text>
        <view class="alert-text">
          <text class="alert-title">实名认证提醒</text>
          <text class="alert-desc">未实名认证用户无法观看直播，请尽快完成认证</text>
        </view>
        <view class="alert-btn" @tap="showVerificationModal">
          <text class="alert-btn-text">立即认证</text>
        </view>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-section">
      <view class="menu-item" @click="navigateTo('/pages/security/security')">
        <view class="menu-icon">🔒</view>
        <text class="menu-text">账号安全</text>
        <view class="arrow">></view>
      </view>
      
      <view class="menu-item" @click="navigateTo('/pages/password/password')">
        <view class="menu-icon">🔑</view>
        <text class="menu-text">修改密码</text>
        <view class="arrow">></view>
      </view>
      
      <view class="menu-item" @click="navigateTo('/pages/notifications/notifications')">
        <view class="menu-icon">📢</view>
        <text class="menu-text">消息通知</text>
        <view class="arrow">></view>
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <view class="logout-section">
      <button class="logout-btn" @click="logout">退出登录</button>
    </view>

    <!-- 编辑信息弹窗 -->
    <view v-if="showEdit" class="modal-overlay" @tap="closeEditModal">
      <view class="modal-content" @tap.stop>
        <view class="modal-header">
          <text class="modal-title">编辑个人信息</text>
          <view class="close-btn" @tap="closeEditModal">
            <text class="close-icon">✕</text>
          </view>
        </view>
        <view class="modal-body">
          <view class="form-item">
            <text class="form-label">头像</text>
            <view class="avatar-upload" @tap="editAvatar">
              <image :src="editForm.avatar" mode="aspectFill" class="upload-avatar"></image>
              <view class="upload-overlay">
                <text class="upload-text">点击更换</text>
              </view>
            </view>
          </view>
          
          <view class="form-item">
            <text class="form-label">用户名</text>
            <input class="form-input" v-model="editForm.name" placeholder="请输入用户名" />
          </view>
          
          <view class="form-item">
            <text class="form-label">账号</text>
            <input class="form-input" v-model="editForm.account" placeholder="请输入账号" />
          </view>
          
          <view class="form-item">
            <text class="form-label">邮箱</text>
            <input class="form-input" v-model="editForm.email" placeholder="请输入邮箱" type="email" />
          </view>
          
          <view class="form-item">
            <text class="form-label">手机号</text>
            <input class="form-input" v-model="editForm.phone" placeholder="请输入手机号" type="number" />
          </view>
          
          <view class="form-item">
            <text class="form-label">密码</text>
            <view class="password-input-group">
              <input class="form-input password-input" v-model="editForm.password" :password="!showPassword" placeholder="请输入新密码" />
              <view class="password-toggle" @tap="togglePassword">
                <text class="toggle-icon">{{ showPassword ? '👁️' : '👁️‍🗨️' }}</text>
              </view>
            </view>
          </view>
          <view class="form-actions">
            <button class="cancel-btn" @tap="closeEditModal">取消</button>
            <button class="save-btn" @tap="saveUserInfo">保存</button>
          </view>
        </view>
      </view>
    </view>

    <!-- 实名认证弹窗 -->
    <view v-if="showVerification" class="modal-overlay" @tap="closeVerificationModal">
      <view class="modal-content verification-modal" @tap.stop>
        <view class="modal-header">
          <text class="modal-title">实名认证</text>
          <view class="close-btn" @tap="closeVerificationModal">
            <text class="close-icon">✕</text>
          </view>
        </view>
        <view class="modal-body">
          <view class="verification-info">
            <text class="verification-desc">为了保障您的账户安全，请完成实名认证</text>
          </view>
          
          <!-- 认证方式选择 -->
          <view class="verification-methods">
            <view class="method-item" :class="{ active: verificationMethod === 'id' }" @tap="selectVerificationMethod('id')">
              <view class="method-icon">📄</view>
              <text class="method-text">身份证认证</text>
            </view>
            <view class="method-item" :class="{ active: verificationMethod === 'face' }" @tap="selectVerificationMethod('face')">
              <view class="method-icon">👤</view>
              <text class="method-text">人脸识别</text>
            </view>
          </view>
          
          <!-- 身份证认证 -->
          <view v-if="verificationMethod === 'id'" class="id-verification">
            <view class="form-item">
              <text class="form-label">真实姓名</text>
              <input class="form-input" v-model="verificationForm.realName" placeholder="请输入真实姓名" />
            </view>
            <view class="form-item">
              <text class="form-label">身份证号</text>
              <input class="form-input" v-model="verificationForm.idCard" placeholder="请输入身份证号码" />
            </view>
          </view>
          
          <!-- 人脸识别认证 -->
          <view v-if="verificationMethod === 'face'" class="face-verification">
            <view class="face-info">
              <text class="face-desc">请确保光线充足，面部清晰可见</text>
            </view>
            <view class="face-capture">
              <view v-if="!verificationForm.faceImage" class="face-placeholder" @tap="captureFace">
                <text class="face-icon">📷</text>
                <text class="face-text">点击进行人脸识别</text>
              </view>
              <view v-else class="face-result">
                <image :src="verificationForm.faceImage" mode="aspectFit" class="face-image"></image>
                <button class="recapture-btn" @tap="captureFace">重新识别</button>
              </view>
            </view>
            <view class="form-item">
              <text class="form-label">真实姓名</text>
              <input class="form-input" v-model="verificationForm.realName" placeholder="请输入真实姓名" />
            </view>
            <view class="form-item">
              <text class="form-label">身份证号</text>
              <input class="form-input" v-model="verificationForm.idCard" placeholder="请输入身份证号码" />
            </view>
          </view>
          
          <view class="verification-notice">
            <text class="notice-text">• 请确保身份信息真实有效</text>
            <text class="notice-text">• 认证信息仅用于身份验证，我们会严格保护您的隐私</text>
            <text class="notice-text">• 认证通过后即可观看直播内容</text>
            <text class="notice-text">• 人脸识别数据会进行加密存储</text>
          </view>
          
          <view class="form-actions">
            <button class="cancel-btn" @tap="closeVerificationModal">取消</button>
            <button class="verify-btn" @tap="submitVerification">提交认证</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Profile',
  data() {
    return {
      userInfo: {
        name: '用户名',
        account: 'user001',
        email: 'user@example.com',
        phone: '',
        avatar: '/static/个人中心.png',
        isVerified: false
      },
      showEdit: false,
      showPassword: false,
      showVerification: false,
      verificationMethod: 'id', // 'id' 或 'face'
      editForm: {
        name: '',
        account: '',
        email: '',
        phone: '',
        password: '',
        avatar: ''
      },
      verificationForm: {
        realName: '',
        idCard: '',
        faceImage: ''
      }
    }
  },
  onLoad() {
    const storedUserInfo = uni.getStorageSync('userInfo');
    if (storedUserInfo) {
      this.userInfo = { ...this.userInfo, ...storedUserInfo };
    }
    // 获取实名认证状态
    const verificationStatus = uni.getStorageSync('verificationStatus');
    if (verificationStatus) {
      this.userInfo.isVerified = verificationStatus;
    }
  },
  methods: {
    navigateTo(path) {
      uni.navigateTo({
        url: path
      })
    },
    logout() {
      uni.showModal({
        title: '确认退出',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            uni.clearStorageSync()
            uni.reLaunch({
              url: '/pages/login/login'
            })
          }
        }
      })
    },
    editAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          this.userInfo.avatar = tempFilePath;
          uni.setStorageSync('userInfo', this.userInfo);
          uni.showToast({
            title: '头像更新成功',
            icon: 'success'
          });
        }
      });
    },
    showEditModal() {
      this.editForm = {
        name: this.userInfo.name,
        account: this.userInfo.account,
        email: this.userInfo.email,
        phone: this.userInfo.phone,
        password: '',
        avatar: this.userInfo.avatar
      };
      this.showEdit = true;
    },
    closeEditModal() {
      this.showEdit = false;
      this.showPassword = false;
    },
    togglePassword() {
      this.showPassword = !this.showPassword;
    },
    saveUserInfo() {
      if (!this.editForm.name.trim() || !this.editForm.account.trim() || !this.editForm.email.trim()) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        });
        return;
      }
      
      // 验证邮箱格式
      const emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailReg.test(this.editForm.email)) {
        uni.showToast({
          title: '请输入正确的邮箱',
          icon: 'none'
        });
        return;
      }
      
      uni.showLoading({
        title: '保存中...'
      });
      
      // 模拟保存过程
      setTimeout(() => {
        uni.hideLoading();
        
        this.userInfo = {
          ...this.userInfo,
          name: this.editForm.name,
          account: this.editForm.account,
          email: this.editForm.email,
          phone: this.editForm.phone,
          avatar: this.editForm.avatar
        };
        
        uni.setStorageSync('userInfo', this.userInfo);
        uni.showToast({
          title: '保存成功',
          icon: 'success'
        });
        
        this.closeEditModal();
      }, 1000);
    },
    // 显示实名认证弹窗
    showVerificationModal() {
      this.showVerification = true;
    },
    // 关闭实名认证弹窗
    closeVerificationModal() {
      this.showVerification = false;
      this.verificationMethod = 'id';
      this.verificationForm = {
        realName: '',
        idCard: '',
        faceImage: ''
      };
    },
    // 选择认证方式
    selectVerificationMethod(method) {
      this.verificationMethod = method;
    },
    // 人脸识别
    captureFace() {
      uni.showModal({
        title: '人脸识别',
        content: '请确保光线充足，将面部对准摄像头',
        confirmText: '开始识别',
        success: (res) => {
          if (res.confirm) {
            // 模拟人脸识别过程
            uni.showLoading({
              title: '识别中...'
            });
            
            setTimeout(() => {
              uni.hideLoading();
              
              // 模拟人脸识别成功，使用一个示例图片
              this.verificationForm.faceImage = '/static/个人中心.png';
              
              uni.showToast({
                title: '人脸识别成功',
                icon: 'success'
              });
            }, 2000);
          }
        }
      });
    },
    // 提交实名认证
    submitVerification() {
      if (!this.verificationForm.realName.trim()) {
        uni.showToast({
          title: '请输入真实姓名',
          icon: 'none'
        });
        return;
      }
      if (!this.verificationForm.idCard.trim()) {
        uni.showToast({
          title: '请输入身份证号',
          icon: 'none'
        });
        return;
      }
      
      // 验证身份证号格式
      const idCardReg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
      if (!idCardReg.test(this.verificationForm.idCard)) {
        uni.showToast({
          title: '请输入正确的身份证号',
          icon: 'none'
        });
        return;
      }
      
      if (this.verificationMethod === 'face' && !this.verificationForm.faceImage) {
        uni.showToast({
          title: '请完成人脸识别',
          icon: 'none'
        });
        return;
      }
      
      uni.showLoading({
        title: '认证中...'
      });
      
      // 模拟认证过程
      setTimeout(() => {
        uni.hideLoading();
        
        // 模拟认证成功
        this.userInfo.isVerified = true;
        uni.setStorageSync('verificationStatus', true);
        
        uni.showToast({
          title: '认证成功',
          icon: 'success'
        });
        
        this.closeVerificationModal();
      }, 3000);
    }
  }
}
</script>

<style scoped>
.profile-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20rpx;
}

.user-card {
  background: #ffffff;
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  border: 1px solid #e0e0e0;
}

.user-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  overflow: hidden;
  margin-right: 30rpx;
  border: 3rpx solid #1976D2;
}

.avatar-img {
  width: 100%;
  height: 100%;
}

.user-info {
  flex: 1;
}

.user-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
  display: block;
  margin-bottom: 10rpx;
}

.user-account {
  font-size: 26rpx;
  color: #666666;
  display: block;
  margin-bottom: 6rpx;
}

.user-phone {
  font-size: 26rpx;
  color: #666666;
  display: block;
}

.edit-btn {
  background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
  padding: 20rpx 30rpx;
  border-radius: 30rpx;
}

.edit-text {
  color: #ffffff;
  font-size: 28rpx;
}

.menu-section {
  background: #ffffff;
  border-radius: 20rpx;
  overflow: hidden;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  border: 1px solid #e0e0e0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 40rpx;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.3s ease;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:active {
  background: #f5f5f5;
}

.menu-icon {
  font-size: 40rpx;
  margin-right: 30rpx;
  width: 60rpx;
  text-align: center;
}

.menu-text {
  flex: 1;
  font-size: 32rpx;
  color: #333333;
}

.arrow {
  color: #999999;
  font-size: 32rpx;
}

.logout-section {
  padding: 20rpx 0;
}

.logout-btn {
  width: 100%;
  background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
  color: #ffffff;
  border: none;
  border-radius: 20rpx;
  padding: 30rpx;
  font-size: 32rpx;
  font-weight: bold;
  box-shadow: 0 4rpx 20rpx rgba(244, 67, 54, 0.3);
}

.logout-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 10rpx rgba(244, 67, 54, 0.3);
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: #ffffff;
  border-radius: 20rpx;
  width: 90%;
  max-width: 600rpx;
  max-height: 80vh;
  overflow: hidden;
}

.modal-header {
  padding: 30rpx;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.close-btn {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-icon {
  font-size: 24rpx;
  color: #666;
}

.modal-body {
  padding: 30rpx;
  max-height: 60vh;
  overflow-y: auto;
}

.form-item {
  margin-bottom: 30rpx;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 15rpx;
  display: block;
}

.form-input {
  width: 100%;
  height: 80rpx;
  border: 1px solid #ddd;
  border-radius: 12rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  background: #f8f9fa;
}

.form-actions {
  display: flex;
  gap: 20rpx;
  margin-top: 40rpx;
}

.cancel-btn, .save-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  border: none;
}

.cancel-btn {
  background: #f5f5f5;
  color: #666;
}

.save-btn {
  background: #1976D2;
  color: #fff;
}

.avatar-upload {
  width: 120rpx;
  height: 120rpx;
  border: 2px dashed #ddd;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  position: relative;
  overflow: hidden;
}

.upload-avatar {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
}

.upload-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.avatar-upload:active .upload-overlay {
  opacity: 1;
}

.upload-text {
  font-size: 22rpx;
  color: #ffffff;
}

.password-input-group {
  display: flex;
  align-items: center;
  position: relative;
}

.password-input {
  flex: 1;
  padding-right: 80rpx;
}

.password-toggle {
  position: absolute;
  right: 20rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-icon {
  font-size: 32rpx;
  color: #999;
}

.verification-status {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-top: 8rpx;
}

.verification-status.verified {
  color: #4CAF50;
}

.verification-status.unverified {
  color: #FF9800;
}

.verification-icon {
  font-size: 24rpx;
}

.verification-text {
  font-size: 24rpx;
  font-weight: 500;
}

/* 实名认证提醒 */
.verification-alert {
  background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(255, 152, 0, 0.3);
}

.alert-content {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.alert-icon {
  font-size: 40rpx;
  color: #ffffff;
}

.alert-text {
  flex: 1;
}

.alert-title {
  font-size: 32rpx;
  color: #ffffff;
  font-weight: bold;
  display: block;
  margin-bottom: 8rpx;
}

.alert-desc {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.9);
  display: block;
}

.alert-btn {
  background: rgba(255, 255, 255, 0.2);
  padding: 16rpx 24rpx;
  border-radius: 20rpx;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.alert-btn-text {
  color: #ffffff;
  font-size: 26rpx;
  font-weight: 500;
}

.verification-modal {
  max-width: 700rpx;
}

/* 认证方式选择 */
.verification-methods {
  display: flex;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.method-item {
  flex: 1;
  padding: 30rpx 20rpx;
  border: 2px solid #e0e0e0;
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
  background: #f8f9fa;
  transition: all 0.3s ease;
}

.method-item.active {
  border-color: #1976D2;
  background: #e3f2fd;
}

.method-icon {
  font-size: 40rpx;
}

.method-text {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}

/* 人脸识别 */
.face-info {
  background: #e8f5e8;
  padding: 20rpx;
  border-radius: 12rpx;
  margin-bottom: 30rpx;
}

.face-desc {
  font-size: 26rpx;
  color: #4CAF50;
  line-height: 1.5;
}

.face-capture {
  margin-bottom: 30rpx;
}

.face-placeholder {
  height: 300rpx;
  border: 2px dashed #ddd;
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15rpx;
  background: #f8f9fa;
}

.face-icon {
  font-size: 60rpx;
  color: #999;
}

.face-text {
  font-size: 28rpx;
  color: #666;
}

.face-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rpx;
}

.face-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 100rpx;
  border: 3px solid #4CAF50;
}

.recapture-btn {
  padding: 15rpx 30rpx;
  background: #4CAF50;
  color: #ffffff;
  border: none;
  border-radius: 20rpx;
  font-size: 26rpx;
}

.verification-info {
  background: #e3f2fd;
  padding: 20rpx;
  border-radius: 12rpx;
  margin-bottom: 30rpx;
}

.verification-desc {
  font-size: 26rpx;
  color: #1976d2;
  line-height: 1.5;
}

.verification-notice {
  background: #fff3e0;
  padding: 20rpx;
  border-radius: 12rpx;
  margin-bottom: 30rpx;
}

.notice-text {
  font-size: 24rpx;
  color: #f57c00;
  line-height: 1.5;
  display: block;
  margin-bottom: 8rpx;
}

.verify-btn {
  background: #4CAF50;
  color: #fff;
}
</style>
